<template>
  <div class="body">
    <el-row :gutter="12" class="demo-radius">
      <el-col
        v-for="(radius, i) in radiusGroup"
        :key="i"
        :span="6"
        :xs="{ span: 12 }"
      >
        <div
          class="radius"
          :style="{
            borderRadius: radius.type
              ? `var(--el-border-radius-${radius.type})`
              : '',
          }"
        >
          <div class="left">
            供应商/联系人：
            <el-input
            @blur="setData"
              v-model="search.name"
              size="small"
              style="
                width: 150px;
                box-shadow: 0px 0px 2px 0.3px #88888831;
                height: 33px;
              "
            />
            <div id="require">
          <el-button type="primary" @click="returnFn()">查询</el-button>
        </div>
          </div>
          <div>
            <el-button type="primary" @click="addSupplier"
              >新增供应商</el-button
            >
            <!-- 新增弹窗 -->
            <el-dialog v-model="dialogFormVisible" title="供应商维护">
              <el-form :model="form">
                <el-form-item
                  label="供应商名称："
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.supName" autocomplete="off" />
                </el-form-item>
                <el-form-item
                  label="供应商地址："
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item
                  label="联系人姓名："
                  :label-width="formLabelWidth"
                >
                  <el-input v-model="form.contact"></el-input>
                </el-form-item>
                <el-form-item label="座机号：" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.landline"
                    placeholder="例：010-65528101"
                  ></el-input>
                </el-form-item>
                <el-form-item label="手机号：" :label-width="formLabelWidth">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="银行账号：" :label-width="formLabelWidth">
                  <el-input v-model="form.card"></el-input>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button
                    type="primary"
                    :plain="true"
                    @click="supplierMaintenance"
                    >确认</el-button
                  >
                </span>
              </template>
            </el-dialog>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-table :data="getSupplierData" style="width: 96%" class="table">
      <el-table-column prop="id" />
      <el-table-column label="供应商" prop="supName" />
      <el-table-column label="联系人" prop="contact" />
      <el-table-column label="座机" prop="landline" />
      <el-table-column label="手机" prop="phone" />
      <el-table-column label="银行账号" prop="card" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="创建日期" prop="createTime" />
      <el-table-column align="right">
        <template #header>
          <el-table-column label="操作" v-text="text" />
        </template>

        <template #default="scope">
          <el-button
            size="small"
            @click="handleEdit(scope.$index, scope.row), (editDialog = true)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="
              (centerDialogVisible = true),
                handleDelete(scope.$index, scope.row)
            "
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 删除弹窗 -->
    <el-dialog v-model="centerDialogVisible" width="30%" center>
      <span> 确认删除吗？ </span>
      <template #footer #default="scope">
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteSupplier()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialog" title="供应商维护">
      <el-form :model="form">
        <el-form-item label="供应商名称：" :label-width="formLabelWidth">
          <el-input v-model="form.supName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="供应商地址：" :label-width="formLabelWidth">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名：" :label-width="formLabelWidth">
          <el-input v-model="form.contact"></el-input>
        </el-form-item>
        <el-form-item label="座机号：" :label-width="formLabelWidth">
          <el-input
            v-model="form.landline"
            placeholder="例：010-65528101"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号：" :label-width="formLabelWidth">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="银行账号：" :label-width="formLabelWidth">
          <el-input v-model="form.card"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialog = false">取消</el-button>
          <el-button type="primary" :plain="true" @click="edit">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      v-model:page-size="pageSize"
      background
      @current-change="pageChange"
      layout="prev, pager, next"
      :total="store.state.supplier.tableTotal"
      class="mt-4"
    />
  </div>
</template>
  
  <script lang="ts">
import {
  computed,
  ref,
  defineComponent,
  reactive,
  watchEffect,
  onBeforeMount,
} from "vue";
import { ElMessage } from "element-plus";
import { useStore, mapGetters, mapMutations } from "vuex";
import axios from "@/utils/http";

export default defineComponent({
  name: "Supplier",
  setup() {
    const store = useStore();

    //查询
const returnFn = () => {
  setSupplierData({
      currentPage: 0,
      pageSize: pageSize.value,
      search:search.name
    });
};

  //输入框为空时重新拿取数据
  const setData=computed(()=>{
    console.log("name",search.name);
    if(!search.name){
      setSupplierData({
      currentPage: 0,
      pageSize: pageSize.value
    });
    }
  });
    const search =  reactive({
  name: null,
});

    const getSupplierData = computed(
      mapGetters(["getSupplierData"]).getSupplierData.bind({
        $store: store,
      })
    );

    const text = "操作";
    const tableData = ref(store.state.supplier.tableData);

    //分页
    const pageSize = ref(10);
    const setSupplierData = mapMutations([
      "setSupplierData",
    ]).setSupplierData.bind({
      $store: store,
    });
    onBeforeMount(() => {
      setSupplierData({
        currentPage: 1,
        pageSize: pageSize.value,
        search: search
      });
    });
    const pageChange = (currentPage: any) => {
      setSupplierData({ currentPage: currentPage, pageSize: pageSize.value });
    };

    const index = 5;

    //编辑
    let supplierRow: ISuppliers = {
      id: 1,
      supName: "",
      contact: "",
      landline: "",
      phone: 1,
      card: 1,
      address: "",
      create_time: "",
    };
    const handleEdit = (index: number, row: ISuppliers) => {
      console.log(row);
      supplierRow = row;
      console.log(index, supplierRow);
      (form.supName = row.supName),
        (form.address = row.address),
        (form.contact = row.contact),
        (form.landline = row.landline),
        (form.phone = row.phone.toString()),
        (form.card = row.card.toString());
    };
    //编辑弹窗确认函数
    const edit = () => {
      console.log(index, supplierRow.id);
      console.log(form.supName);
      axios({
        url: "/medicine/supplier/updateSup",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          "supName": form.supName,
          "contact": form.contact,
          "landline": form.landline,
          "phone": form.phone,
          "card": form.card,
          "address": form.address,
          "id": supplierRow.id,
        },
      }).then((res: any) => {
        console.log("1", res);
        setSupplierData({ currentPage: 1, pageSize: pageSize.value });
      });
      editDialog.value = false;
    };

    //删除
    const handleDelete = (index: number, row: ISuppliers) => {
      console.log(index, row);
      supplierRow = row;
    };
    const deleteSupplier = () => {
      axios({
        url: "/medicine/supplier/deleteSup",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        params: {
          "id": supplierRow.id,
        },
      }).then((res: any) => {
        console.log("1", res);
        setSupplierData({ currentPage: 1, pageSize: pageSize.value });
      });
      centerDialogVisible.value = false;
    };

    //搜索新增框
    const radiusGroup = ref([
      {
        name: "Small Radius",
        type: "small",
      },
    ]);

    const getValue = (type: string) => {
      const getCssVarValue = (prefix: any, type: any) =>
        getComputedStyle(document.documentElement).getPropertyValue(
          `--el-${prefix}-${type}`
        );
      return getCssVarValue("border-radius", type);
    };
    const addSupplier = () => {
      (form.supName = ""),
        (form.address = ""),
        (form.contact = ""),
        (form.landline = ""),
        (form.phone = ""),
        (form.card = "");
      dialogFormVisible.value = true;
    };
    //新增
    const dialogFormVisible = ref(false);

    const editDialog = ref(false);
    const formLabelWidth = "140px";

    const form = reactive({
      id: "",
      supName: "",
      address: "",
      contact: "",
      landline: "",
      phone: "",
      card: "",
      date1: "",
      date2: "",
      delivery: false,
      type: [],
      resource: "",
      desc: "",
    });
    //正则表达式
    var reg = /^[\u0391-\uFFE5A-Za-z]+$/;
    var pattern = /^[1-9]\d*$/;
    var tel = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
    const validateTag = watchEffect(() => {
      if (!reg.test(form.supName)) {
        form.supName = "";
      }
      if (!reg.test(form.contact)) {
        form.contact = "";
      }
      if (!pattern.test(form.phone.toString())) {
        form.phone = "";
      }
    });
    //新增供应商弹窗确认函数
    const supplierMaintenance = () => {
      console.log(form);
      if (!form.supName) {
        ElMessage({
          showClose: true,
          message: "供应商名称不能为空！",
          type: "error",
        });
      } else if (!form.contact) {
        ElMessage({
          showClose: true,
          message: "联系人姓名不能为空！",
          type: "error",
        });
      } else if (!tel.test(form.phone.toString())) {
        ElMessage({
          showClose: true,
          message: "手机号格式不正确！",
          type: "error",
        });
      } else {
        axios({
        url: "/medicine/supplier/addSup",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          "supName": form.supName,
          "contact": form.contact,
          "landline": form.landline,
          "phone": form.phone,
          "card": form.card,
          "address": form.address
        },
      }).then((res: any) => {
        console.log("1", res);
        setSupplierData({ currentPage: 1, pageSize: pageSize.value });
      });
        dialogFormVisible.value = false;
      }
    };

    //删除弹窗
    const centerDialogVisible = ref(false);

    return {
      store,
      setData,
      deleteSupplier,
      getSupplierData,
      setSupplierData,
      returnFn,
      text,
      search,
      handleEdit,
      edit,
      handleDelete,
      tableData,
      radiusGroup,
      getValue,
      getComputedStyle,
      editDialog,
      dialogFormVisible,
      formLabelWidth,
      form,
      supplierMaintenance,
      ElMessage,
      reg,
      validateTag,
      tel,
      centerDialogVisible,
      addSupplier,
      pageChange,
      pageSize,
      supplierRow,
    };
  },
});

interface ISuppliers {
  id: number;
  supName: string;
  contact: string;
  landline: string;
  phone: number;
  card: number;
  address: string;
  create_time: string;
}
</script>
<style scoped>
.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.table {
  border: 1px solid #88888831;
  box-shadow: 0px 0px 5px 2.5px #88888831;
  margin-bottom: 30px;
}
.demo-radius .title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  margin: 10px 0;
}
.demo-radius .value {
  color: var(--el-text-color-primary);
  font-size: 16px;
  margin: 10px 0;
}
.demo-radius .radius {
  height: 60px;
  width: 1160px;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin: 20px;
  box-shadow: 0px 0px 5px 2.5px #88888831;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #ffffff;
}
.left {
  color: #676a6d;
}
/* 新增 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-dialog {
  --el-dialog-width: 10%;
}
/* 删除弹窗 */
.dialog-footer button:first-child {
  margin-right: 10px;
}

#require{
 float: right;
 margin-left:20px
}
</style>
  